<template>
  <view class="contract-preview-page">
    <view class="navbar">
      <text class="back-icon" @click="goBack">返回</text>
      <text class="navbar-title">合同预览</text>
    </view>
    <view class="contract-content">
      <div v-html="htmlContent"></div>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: ''
    };
  },
  onLoad() {
    // 从本地缓存获取合同内容
    let rawHtml = uni.getStorageSync('contractHtml') || '';
    if (!rawHtml) {
      this.showToast('合同内容加载失败');
      setTimeout(() => {
        this.goBack();
      }, 1500);
      return;
    }
    
    // 处理HTML内容，添加自适应样式
    this.htmlContent = this.processHtml(rawHtml);
  },
  methods: {
    // 添加处理HTML的方法
    processHtml(html) {
      // 添加更强力的自适应样式标签
      let styleTag = '<style>' +
        '* { box-sizing: border-box !important; }' +
        'body { margin: 0 !important; padding: 0 !important; width: 100% !important; }' +
        'table { width: 100% !important; margin: 10px auto !important; border-collapse: collapse !important; table-layout: fixed !important; }' +
        'td, th { border: 1px solid #ddd !important; padding: 4px !important; word-break: break-all !important; font-size: 14px !important; }' +
        'p, div, span { width: 100% !important; margin-left: auto !important; margin-right: auto !important; }' +
        'h1, h2, h3 { width: 100% !important; margin: 15px auto !important; text-align: center !important; }' +
        '.company-title { font-size: 18px !important; font-weight: bold !important; text-align: center !important; margin: 10px auto !important; }' +
        '.contract-title { font-size: 16px !important; font-weight: bold !important; text-align: center !important; margin: 10px auto !important; }' +
        '.contract-parties { display: flex !important; justify-content: space-between !important; width: 100% !important; }' +
        '.contract-party { width: 48% !important; }' +
      '</style>';
      
      // 在body开始标签后添加样式
      let processedHtml = html.replace('<body>', '<body>' + styleTag);
      
      // 将整个内容包装在自适应的div中
      processedHtml = processedHtml.replace('<body>' + styleTag, '<body>' + styleTag + '<div style="width:100%;margin:0 auto;">');
      processedHtml = processedHtml.replace('</body>', '</div></body>');
      
      return processedHtml;
    },
    
    goBack() {
      uni.navigateBack();
    },
    
    showToast(title, icon = 'none') {
      uni.showToast({
        title,
        icon
      });
    }
  }
};
</script>

<style>
.contract-preview-page {
  padding: 0;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.navbar {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-icon {
  font-size: 16px;
  margin-right: 15px;
  color: #333;
}

.navbar-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.contract-content {
  padding: 10px 15px;
  background: #ffffff;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: calc(100% - 20px);
  box-sizing: border-box;
  overflow-x: hidden;
}

/* 强制所有元素自适应和限制宽度 */
.contract-content :deep(*) {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
  padding-right: 15px !important;
}

.contract-content :deep(table) {
  width: 100% !important;
  margin: 10px auto !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

.contract-content :deep(td),
.contract-content :deep(th) {
  border: 1px solid #ddd !important;
  padding: 4px !important;
  word-break: break-all !important;
  font-size: 14px !important;
}

.contract-content :deep(img) {
  max-width: 100% !important;
  height: auto !important;
}

.contract-content :deep(p),
.contract-content :deep(div),
.contract-content :deep(span) {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.contract-content :deep(h1),
.contract-content :deep(h2),
.contract-content :deep(h3) {
  width: 100% !important;
  margin: 15px auto !important;
  text-align: center !important;
}
</style> 